import { useRef, useState } from 'react';
import News from '../components/news/news';

export default function Index() {
    const arr1 =[
        { title: 'News 1', content: 'Content 1' },
        { title: 'News 2', content: 'Content 2' },
        { title: 'News 3', content: 'Content 3' },
        { title: 'News 4', content: 'Content 4' },
    ]
    const getText = (val) => {
          console.log('子组件的数据...',val);
    }
    const  iptRef = useRef()
    
    const  getRef = () => {
        console.log(iptRef.current.value);
    }
    const [testIpt,setTestIpt] = useState('')
    const [isShow,setIsShow] =  useState(false)
    const check = () => {
        setIsShow(!isShow)
      }

    return (
        <div>
            <News arr={arr1} fuc={getText}></News>
            <input  ref={iptRef} />
            <button onClick={getRef}>点击拿到ref</button>
            {/* 双向绑定 */}
            <input value={testIpt} onChange={(e)=>{setTestIpt(e.target.value)}} />

            {/* 隐藏显示 */}
            {isShow && <button >古力娜扎</button>}
             {!isShow && <button >迪丽热巴</button>}
              <button onClick={check}>点击切换</button>
        </div>
    )
}
